.side-bar-wrapper {
  height: 100%;
  color: #000;
  display: flex;
  overflow: hidden;

  .bar-right {
    width: 14rem;
    min-width: 0;
    height: 80vh;
    position: relative;
    background-color: #363e47;
  }

  .bar-left {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    width: 4rem;
    height: 80vh;
    background-color: #303841;

    .tab-items {
      display: flex;
      flex-direction: column;
      flex-grow: 1;

      .iconfont {
        position: relative;
        margin: 0;
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 30px;
        cursor: pointer;
        color: #a5b5c1;
        user-select: none;
        -moz-user-select: none;
      }

      .active {
        color: #fff;
      }

      .unread {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 999;
        display: inline-block;
        height: 18px;
        padding: 0 6px;
        font-size: 12px;
        color: #fff;
        line-height: 18px;
        text-align: center;
        white-space: nowrap;
        border-radius: 10px;
        background-color: #f35f5f;
      }
    }

    .bottom {
      height: 70px;

      & > span {
        display: block;
      }

      .btn-more {
        width: 100%;
        height: 70px;
        line-height: 70px;
        font-size: 30px;
        color: #a5b5c1;
        text-align: center;
        cursor: pointer;
      }

      .iconfont {
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 30px;
        cursor: pointer;
        color: #a5b5c1;
        user-select: none;
        -moz-user-select: none;
      }

      .iconfont:hover {
        color: white;
      }
    }

    .btn-more:hover {
      color: #fff;
    }
  }
}
